<template>
    <div class="materia_tag_container">
        <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" />
        <ZwTable
            ref="tableRef"
            class="table-box"
            tab-h="initial"
            :option="tableOption"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()"
            @select="onSelect"
            @selection-change="onSelectionChange"
            @select-all="onSelectAll">
            <template #headerOperate>
                <el-button v-auth="'ADD_GROUP_LK'" type="primary" @click="openCreateTag">新建标签组</el-button>
            </template>
        </ZwTable>
    </div>
    <!-- 删除弹框 -->
    <ZWCreateTag ref="createTag" @submit="initList" />
    <ZWDeletdialog ref="ZWDeletdialogRef" @submit="delte" />
</template>

<script setup lang="tsx">
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import ZWDeletdialog from '@/components/ZWDeletdialog.vue';
import ZWCreateTag from '@/components/ZWCreateTag.vue';
import { getTagsList, delteTags } from '@/api/common';
import { ElMessage, ElImage, ElIcon, ElButton } from 'element-plus';
import { ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import { deepCopy } from '@/utils/helper';
import { useStore } from '@/store';
const store = useStore();
const router = useRouter();
const createTag: any = ref(null);
const ZWDeletdialogRef: any = ref(null);
const checkList = ref([]);
const defaultParams = {
    keyword: ''
};
// 删除标签ID
const removeId = ref(0);
const openCreateTag = () => {
    createTag.value.isDefault = false;
    createTag.value.appDialog.visible = true;
    createTag.value.appDialog.title = '新建标签组';
};
const tableRef = ref<HTMLElement | null>(null);
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const searchOption = computed(() => {
    return [
        {
            label: '标签搜索',
            name: 'keyword',
            value: '',
            type: 'input',
            placeholder: '请输入内容进行查找'
        }
    ];
});
const search = (v: any) => {
    state.searchParams = { ...deepCopy(defaultParams), ...v };
};
const reset = (v: any) => {
    state.searchParams = { ...deepCopy(defaultParams) };
};

// 表格
const tableOption = [
    {
        prop: 'name',
        label: '标签组',
        showOverflowTooltip: true,
        width: 200
    },
    {
        prop: 'tags',
        label: '标签',
        minwidth: 200,
        showOverflowTooltip: true,
        isTag: true
    },
    {
        prop: 'operate',
        label: '操作',
        width: 200,
        fixed: 'right',
        isOperate: true,
        renderOperate({ row }) {
            return (
                <>
                    <ElButton
                        v-auth="EDIT_MATERIAL"
                        size="small"
                        onClick={() => {
                            editTag(row);
                        }}>
                        编辑
                    </ElButton>
                    <ElButton
                        v-auth="DEL_MATERIAL"
                        size="small"
                        onClick={() => {
                            delTag(row);
                        }}>
                        删除
                    </ElButton>
                </>
            );
        }
    }
];
const fetchApi = () => {
    // 获取文件列表
    // return getFissionList
    return getTagsList;
};
// 选中表格 checkbox
const onSelect = (selection, row) => {
    if (selection.constructor === Array) checkList.value = selection.map(v => v.id);
};
// 选择项变更
const onSelectionChange = selection => {};
// 全选
const onSelectAll = selection => {
    checkList.value = selection.map(v => v.id);
};
// 刷新表格
const reloadTable = () => {
    tableRef.value.reload();
};
// 导出表格数据
const exportTableData = () => {};
// 编辑标签
const editTag = (data: any) => {
    if (data.name == '默认分组') {
        createTag.value.isDefault = true;
    } else {
        createTag.value.isDefault = false;
    }
    createTag.value.appDialog.visible = true;
    createTag.value.appDialog.title = '编辑标签组';
    createTag.value.isEdit = true;
    createTag.value.groupData.name = data.name;
    createTag.value.groupData.id = data.id;
    createTag.value.groupData.tags = filterTag(data.tags);
};
// 过滤会先标签
const filterTag = (data: any) => {
    const arr: string[] = [];
    data.forEach((item: any) => {
        arr.push(item.name);
    });
    return arr;
};
//删除标签
const delTag = (data: any) => {
    removeId.value = data.id;
    ZWDeletdialogRef.value.appDialog.visible = true;
};
// 确认删除该标签
const delte = async () => {
    const res: any = await delteTags({ id: removeId.value });
    ZWDeletdialogRef.value.appDialog.visible = false;
    ElMessage.success('删除成功');
    initList();
};

const initList = (val?: any) => {
    // tagList(val)
    tableRef.value.reload();
};
</script>

<style lang="scss" scoped>
.materia_tag_container {
    height: calc(100vh - 142px);
    padding: 24px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .zw-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        :deep(.el-table) {
            flex: 1;

            .el-table__empty-block {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}

.dropdown_btn {
    margin-right: 10px;
}
</style>
